<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="Author" content="只会切图的前端">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>制作h5翻页效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 100%;
        }

        .main {
            width: 100%;
            height: 100%;
            max-width: 540px;
            position: relative;
            margin: 0 auto;
        }

        .outer {
            position: absolute;
            z-index: 999;
            top: 0;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            cursor: pointer;
        }

        .box {
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: relative;
        }

        .page {
            height: 100%;
            width: 100%;
            overflow: hidden;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
        }

        .page.active {
            z-index: 3;
        }

        .page.current {
            z-index: 2;
        }

        .page img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="outer"></div>
        <div class="box" id="box">
            <div class="page current">
                <img src="./1.webp" />
            </div>
            <div class="page">
                <img src="./2.webp" />
            </div>
            <div class="page">
                <img src="./3.webp" />
            </div>
            <div class="page">
                <img src="./4.webp" />
            </div>
            <div class="page">
                <img src="./5.webp" />
            </div>
        </div>
    </div>
    <script>
        let pageAll = document.getElementsByClassName("page");
        var pageH = document.getElementById("box").offsetHeight;//页面高度

        let startY, endY, val = 0;
        let curPage = 0; //当前页索引
        let nextPage = 1;//下一页索引
        let ifDown = false;//是否按下鼠标
        let ifOK = true;//翻页是否结束

        //移动端
        document.addEventListener("touchstart", function (e) {
            if (ifOK) {
                ifDown = true;
                ifOK = false;
                startY = e.touches[0].pageY;
            }
        })
        document.addEventListener("touchmove", function (e) {
            if (!ifDown) {
                return;
            }
            endY = e.touches[0].pageY;
            val = startY - endY;
            moveF();
        })
        document.addEventListener("touchend", function (e) {
            if (!ifDown) {//没按下鼠标
                return;
            }
            console.log("mouseup", val)
            ifDown = false;//鼠标没点击
            pageF();
        })

        //鼠标点击事件 pc端
        document.addEventListener("mousedown", function (e) {
            if (ifOK) {//上一次翻页已结束
                ifDown = true;
                ifOK = false;
                console.log("mousedown", e.offsetY)
                startY = e.offsetY;
            }
        })
        document.addEventListener("mousemove", function (e) {
            if (!ifDown) {//没按下鼠标
                return;
            }
            endY = e.offsetY;
            val = startY - endY;
            moveF();
        })
        document.addEventListener("mouseup", function (e) {
            if (!ifDown) {//没按下鼠标
                return;
            }
            console.log("mouseup", val)
            ifDown = false;//鼠标没点击
            pageF();
        })

        //判断上翻还是下翻
        function pageF() {
            //可以翻了
            if (Math.abs(val) > 60) {
                startF();
            } else {//还原不翻
                pageAll[nextPage].classList.remove("active");
                pageAll[nextPage].style.transform = "translateY(0px)";
                clearF();
            }
        }
        //还原
        function clearF() {
            val = 0;
            startY = 0;
            endY = 0;
            ifOK = true;//翻页结束
            console.log("结束", ifOK)
        }
        //开始翻页
        function startF() {
            if (val > 0) {//上翻
                val += 15;
                let a = pageH - val;
                if (a <= 0) {
                    setCur();
                } else {
                    pageAll[nextPage].style.transform = "translateY(" + a + "px)";
                    window.requestAnimationFrame(startF);
                }
            } else {
                val -= 15;
                let a = -(pageH + val);
                if (a >= 0) {
                    setCur();
                } else {
                    pageAll[nextPage].style.transform = "translateY(" + a + "px)";
                    window.requestAnimationFrame(startF);
                }
            }
        }
        //设置当前页面
        function setCur() {
            pageAll[nextPage].style.transform = "translateY(0px)";
            pageAll[curPage].classList.remove("current");
            curPage = nextPage;//当前页索引修改
            pageAll[nextPage].classList.remove("active");
            pageAll[curPage].classList.add("current");
            clearF();
        }
        //移动
        function moveF() {
            nextPage = curPage;
            let h;//移动
            if (val > 0) {//最后一页 上翻 返回第一页
                if (curPage < pageAll.length - 1) {
                    nextPage++;
                } else {
                    nextPage = 0;
                }
                h = pageH - val;
            } else {
                //第一页 下翻 返回最后一页
                if (curPage != 0) {
                    nextPage--;
                } else {
                    nextPage = pageAll.length - 1;
                }
                h = - (pageH + val);
            }
            pageAll[nextPage].classList.add("active");
            pageAll[nextPage].style.transform = "translateY(" + h + "px)";
        } 
    </script>
</body>

</html>